<template>
  <div class="header-menu-item" @mouseleave="() => { isShow = false }">
    <a href="javascript:;" class="link" @mouseover="() => { isShow = true }">个人中心</a>
    <div class="dorpdown-box left" v-show="isShow">
      <span class="title iconfont icon-dianpu">店铺</span>
      <div class="link-group">
        <router-link class="link-item" :to="{path: '#'}">我的订单</router-link>
        <router-link class="link-item" :to="{path: '#'}">收藏</router-link>
      </div>
      <span class="title iconfont icon-paimai">拍卖</span>
      <div class="link-group">
        <router-link class="link-item" :to="{path: '#'}">拍卖交易</router-link>
        <router-link class="link-item" :to="{path: '#'}">我的竞拍</router-link>
        <router-link class="link-item" :to="{path: '#'}">收藏</router-link>
      </div>
      <span class="title"></span>
      <div class="link-group">
        <router-link class="link-item" :to="{path: '#'}">我的好友</router-link>
        <router-link class="link-item" :to="{path: '#'}">资金账户</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import './headerMenuItem.scss'

export default {
  name: 'personCenter',
  data () {
    return {
      isShow: false
    }
  }
}

</script>

<style lang="scss" scoped>
  .dorpdown-box {
    width: 85px;
    .title {
      display: block;
      width: 100%;
      line-height: 25px;
      border-bottom: 1px solid #DDDDDD;
      margin: 0 0 5px 0;
      color: #AFAFAF;
      cursor: default;
    }
    .link-group {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      margin: 0 -10px;
      .link-item {
        line-height: 25px;
        background: transparent;
        text-decoration: none;
        color: #000000;
        padding: 0 15px;
        &:hover,:focus,:active {
          background: #EEEEEE;
          color: #7B111B;
        }
      }
    }
  }
</style>
